<template>
  <div>
    <el-container>
      <el-header>
        <el-row type="flex" justify="center">
          <el-col :span="17">
            <el-col :span="14" class="header"
              ><span><a href="/" class="header-name">清阅</a></span></el-col
            >
            <el-col :span="10" class="header-right">
              <el-col :span="14">
                <el-input
                  class="search"
                  placeholder="搜索"
                  suffix-icon="el-icon-search"
                  v-model="searchValue"
                  @change="searchChange"
                >
                </el-input>
              </el-col>
              <el-col :span="10" class="login-la">
                <el-col :span="18" class="language">
                  <div>
                    <span>简体中文 <i class="el-icon-d-caret"></i></span>
                  </div>
                </el-col>
                <el-col :span="6" class="login"
                  ><span v-if="IsShowLogin" @click="centerDialogVisible = true"
                    >登录</span
                  >
                  <el-dropdown v-if="!IsShowLogin">
                    <span class="el-dropdown-link loginOut"
                      ><i class="el-icon-user-solid"></i
                      >{{ loginForm.username }}</span
                    >
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        ><span @click="loginOut"
                          >注销登录</span
                        ></el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-dialog
      title="登录"
      :visible.sync="centerDialogVisible"
      width="25%"
      center
    >
      <div class="login-form">
        <div class="weiChat">
          微信登录
        </div>
        <div class="loginText">
          <el-form :model="loginForm" ref="loginForm">
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: true,
                  message: '请输入用户名或者邮箱',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="loginForm.username"
                placeholder="邮箱地址或者用户名"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="password"
              :rules="[
                {
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="loginForm.password"
                placeholder="密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div>
                <button class="loginIn" @click="loginIn">登录</button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="lostPa">
        <span class="lostPass">忘记密码</span>
        <div class="register">
          <span @click="registerChange"
            ><span style="color:#798CA5">还没有账号？&nbsp;&nbsp;</span
            >立即注册</span
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog title="注册" :visible.sync="centerRegister" width="25%" center>
      <div class="login-form">
        <div class="loginText">
          <el-form :model="loginForm" ref="loginForm">
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: true,
                  message: '请输入用户名或者邮箱',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="loginForm.username"
                placeholder="邮箱地址或者用户名"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="password"
              :rules="[
                {
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="loginForm.password"
                placeholder="密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div>
                <button class="loginIn" @click="loginRegister">立即注册</button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="搜索结果"
      :visible.sync="dialogSearch"
      @open="getSearchResult"
    >
      <el-table
        :data="searchList"
        border
        stripe
        v-loading="loading"
        element-loading-text="搜索中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="文章标题" prop="title"></el-table-column>
        <el-table-column label="文章类别" prop="category"></el-table-column>
        <el-table-column label="添加日期" prop="addTime"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              @click="ShowArticleDea(scope.row._id)"
              icon="el-icon-document"
              size="mini"
            >查看文章</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      centerDialogVisible: false,
      loginForm: {
        username: "",
        password: "",
      },
      IsShowLogin: true,
      centerRegister: false,
      dialogSearch: false,
      loading: false,
      searchList: [],
    };
  },
  created() {
    this.loginWindow();
  },
  methods: {
    loginWindow() {
      if (window.sessionStorage.getItem("userLogin")) {
        this.IsShowLogin = false;
        this.loginForm.username = window.sessionStorage.getItem("userLogin");
      } else {
        this.IsShowLogin = true;
      }
    },
    registerChange() {
      this.centerDialogVisible = false;
      this.centerRegister = true;
    },
    loginOut() {
      window.sessionStorage.removeItem("userLogin");
      this.IsShowLogin = true;
      this.$message.success("注销登录成功");
    },
    loginIn() {
      this.$axios({
        method: "post",
        url: "/blog/login",
        data: {
          password: this.loginForm.password,
          account: this.loginForm.username,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.$message.warning(res.data.message);
          this.centerDialogVisible = false;
          this.centerRegister = true;
        } else if (res.data.code == 2) {
          this.$message.warning(res.data.message);
        } else if (res.data.code == 5) {
          this.$message.success(res.data.message);
          window.sessionStorage.setItem("userLogin", this.loginForm.username);
          this.IsShowLogin = false;
          this.centerDialogVisible = false;
        }
      });
    },
    loginRegister() {
      this.$axios({
        method: "post",
        url: "/blog/register",
        data: {
          password: this.loginForm.password,
          account: this.loginForm.username,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          this.$message.warning(res.data.message);
        } else if (res.data.code == 5) {
          this.$message.success(res.data.message);
          window.sessionStorage.setItem("userLogin", this.loginForm.username);
          this.IsShowLogin = false;
          this.centerRegister = false;
        }
      });
    },
    searchChange() {
      console.log(this.searchValue);
      this.$store.commit("searchChange", this.searchValue);
      this.dialogSearch = true;
    },
    getSearchResult() {
      this.searchList = []
      this.loading = true
      this.$axios({
        method: "post",
        url: "/search",
        data: {
          data: this.searchValue,
        },
      }).then((res) => {
        console.log(res);
        res.data.data.forEach((item) => {
          item.addTime = item.addTime.substring(0, 10);
          this.searchList.push(item);
        });
        this.loading = false
      });
    },
    ShowArticleDea(id){
      this.$router.push('/article/'+id)
      this.dialogSearch = false
    }
  },
};
</script>

<style lang="less" scoped>
.el-container {
  border-bottom: 1px #e9eef5 solid;
}
.el-row {
  padding: 5px;
  .header {
    padding: 5px;
    .header-name {
      color: #426799;
      font-size: 24px;
      font-weight: normal;
      letter-spacing: 10px;
    }
  }
  .header-right {
    color: #667c99;
    font-size: 13px;
    .search {
      display: inline-block;
      color: #667c99;
      background-color: #e6ecf4;
      margin-top: 5px;
    }
    .login-la {
      text-align: center;
      vertical-align: middle;
      margin-top: 20px;
      .language {
        display: inline-block;
        margin-bottom: 0;
        cursor: pointer;
        white-space: nowrap;
        line-height: 20px;
        &:hover {
          font-weight: bold;
        }
      }
      .loginOut {
        color: rgb(88, 88, 247);
      }
      .login {
        cursor: pointer;
        &:hover {
          font-weight: bold;
        }
      }
    }
  }
}
.login-form {
  background: #e6ecf4;
  width: 100%;
  text-align: center;
  padding: 20px;
  .weiChat {
    display: inline-block;
    padding: 10px;
    margin: 10px 0;
    width: 60%;
    background-color: #22aa00;
    border-radius: 5px;
    color: #fff;
    &:hover {
      background-color: #187700;
      cursor: pointer;
    }
  }
  .loginText {
    padding: 10px;
  }
  .loginIn {
    display: inline-block;
    width: 100%;
    font-size: 15px;
    background-color: #4d698e;
    outline: none;
    height: 50px;
    border: none;
    color: #fff;
    &:hover {
      background-color: #3b516d;
      cursor: pointer;
    }
  }
}
.lostPa {
  text-align: center;
  padding: 10px;
  font-size: 13px;
  color: #426799;
  .lostPass {
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .register {
    margin-top: 10px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
